<template>
  <div class="dashboard">
    <a-row :gutter="20">
      <a-col :span="6">
        <a-card hoverable>
          <a-statistic
            title="用户总数"
            :value="statistics.userCount"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <user-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <a-statistic
            title="待审核"
            :value="statistics.pendingReviewCount"
            :value-style="{ color: '#52c41a' }"
          >
            <template #prefix>
              <file-text-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <a-statistic
            title="公告数量"
            :value="statistics.announcementCount"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <notification-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <a-statistic
            title="综测记录"
            :value="statistics.scoreCount"
            :value-style="{ color: '#f5222d' }"
          >
            <template #prefix>
              <trophy-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="20" style="margin-top: 20px">
      <a-col :span="12">
        <a-card title="最新公告">
          <template #extra>
            <a @click="$router.push('/announcements/list')">查看更多</a>
          </template>
          <a-list v-if="announcements.length > 0" size="small" :data-source="announcements">
            <template #renderItem="{ item }">
              <a-list-item>
                <a @click="$router.push(`/announcements/detail/${item.id}`)">
                  {{ item.title }}
                </a>
                <template #extra>
                  <span style="color: #999; font-size: 12px">
                    {{ new Date(item.time).toLocaleDateString() }}
                  </span>
                </template>
              </a-list-item>
            </template>
          </a-list>
          <a-empty v-else description="暂无公告" />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="待审核项">
          <template #extra>
            <a @click="$router.push('/extra-review/list')">查看更多</a>
          </template>
          <a-list v-if="pendingReviews.length > 0" size="small" :data-source="pendingReviews">
            <template #renderItem="{ item }">
              <a-list-item>
                <a @click="$router.push(`/extra-review/detail/${item.id}`)">
                  {{ item.name }} - {{ item.student_name || '未知' }}
                </a>
                <template #extra>
                  <a-tag color="orange">待审核</a-tag>
                </template>
              </a-list-item>
            </template>
          </a-list>
          <a-empty v-else description="暂无待审核项" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  UserOutlined,
  FileTextOutlined,
  NotificationOutlined,
  TrophyOutlined
} from '@ant-design/icons-vue'
import { userAPI } from '@/api/user'
import { announcementAPI } from '@/api/announcement'
import { extraReviewAPI } from '@/api/extraReview'
import { scoreAPI } from '@/api/score'
import { message } from 'ant-design-vue'
import type { Announcement } from '@/api/announcement'
import type { ExtraReview } from '@/api/extraReview'

// 统计数据
const statistics = ref({
  userCount: 0,
  pendingReviewCount: 0,
  announcementCount: 0,
  scoreCount: 0
})

// 最新公告
const announcements = ref<Announcement[]>([])
// 待审核项
const pendingReviews = ref<ExtraReview[]>([])

// 加载统计数据
const loadStatistics = async () => {
  try {
    // 加载用户总数
    const userRes = await userAPI.getUserList({ page: 1, page_size: 1 })
    statistics.value.userCount = userRes.data.count
    
    // 加载待审核数量
    const reviewRes = await extraReviewAPI.getExtraReviewList({ status: 'pending', page: 1, page_size: 1 })
    statistics.value.pendingReviewCount = reviewRes.data.count
    
    // 加载公告数量
    const announcementRes = await announcementAPI.getAnnouncementList({ page: 1, page_size: 1 })
    statistics.value.announcementCount = announcementRes.data.count
    
    // 加载综测记录数量
    const scoreRes = await scoreAPI.getScoreList({ page: 1, page_size: 1 })
    statistics.value.scoreCount = scoreRes.data.count
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 加载最新公告
const loadAnnouncements = async () => {
  try {
    const res = await announcementAPI.getAnnouncementList({ page: 1, page_size: 5, ordering: '-time' })
    announcements.value = res.data.results
  } catch (error) {
    console.error('加载公告失败:', error)
  }
}

// 加载待审核项
const loadPendingReviews = async () => {
  try {
    const res = await extraReviewAPI.getExtraReviewList({ status: 'pending', page: 1, page_size: 5 })
    pendingReviews.value = res.data.results
  } catch (error) {
    console.error('加载待审核项失败:', error)
  }
}

onMounted(() => {
  loadStatistics()
  loadAnnouncements()
  loadPendingReviews()
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

:deep(.ant-card) {
  border-radius: 8px;
}

:deep(.ant-card-hoverable:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>
